<template>
    <view class="container p-[24rpx] bg-[#fff] rounded-[8rpx]" >
        <up-image @click="checkItem" :show-loading="true" :src="baseUrl+item.pic" width="80px" height="80px" radius	="8rpx" ></up-image>
        <view class="C-Right">
            <view class="CR-Top" @click="checkItem">
                <view class="CRTT">{{ item.name }}</view>
                <view class="CRTB">
                    <view class="type" style="flex-shrink: 0;">冷冻</view>
                    <up-line length="11" margin="0 10rpx" direction="col"></up-line>
                    <view class="ttext">{{ item.info }}</view>
                </view>
            </view>
            <view class="CR-bottom">
                <view class="CRB-Left" @click="checkItem">
                    <priceNumber :price="item.price"></priceNumber>
                    <view class="oldNumber">￥{{ item.demoPrice }}</view>
                </view>
                <image
                    src="../static/image/add.png"
                    mode="scaleToFill"
                    class="CRB-Right"
                />
            </view>
        </view>
    </view>
</template>

<script setup>
import env from '@/config/common.js'
import priceNumber from '@/components/priceNumber'
import { ref } from 'vue';
let baseUrl = env.API_BASE_URL_DEV
let props = defineProps({
    item:{
        type:Object,
        default:()=>{}
    }
})
let src = ref('https://cdn.uviewui.com/uview/swiper/swiper1.png')
function checkItem(){
    uni.navigateTo({
        url:'/subPages/productItem/productItem?id=' + props.item.id
    })
}
</script>

<style lang="scss" scoped>
.container{
    display: flex;
    padding: 24rpx;
    background-color: #FFF;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
    .C-Right{
        display: flex;
        flex: 1;
        margin-left: 24rpx;
        flex-direction: column;
        justify-content: space-between;
        .CR-Top{
            .CRTT{
                font-weight: 400;
                font-size: 26rpx;
                color: #111111;
            }
            .CRTB{
                display: flex;
                .type{
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #46A7FD;
                }
                .ttext{
                    flex: 1;
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #666666;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
        .CR-bottom{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .CRB-Left{
                display: flex;
                align-items: end;
                .oldNumber{
                    font-size: 22rpx;
                    color: #999999;
                    transform: translate(0,18rpx);
                    text-decoration: line-through;
                }
            }
            .CRB-Right{
                width: 44rpx;
                height: 44rpx;
                display: block;
            }
        }
        
    }
}
</style>